<template>
	<div>
		<el-col :span="10">
			<el-form-item
				:label="item.param_name"
				v-for="(item, index) in formConfigList"
				:key="index"
				clearable
				:style="{ width: '450px' }"
				:prop="formData[item.param_key]"
				:rules="[
					{
						required: item.param_required === 1 ? true : false,
						message: '此项为必填项',
						trigger: 'change'
					}
				]"
			>
				<el-input
					:placeholder="'请输入' + item.param_description"
					v-if="item.param_type === 'string'"
					v-model="formData[item.param_key]"
				/>
				<el-input
					:placeholder="'请输入' + item.param_description"
					v-if="item.param_type === 'int'"
					v-model="formData[item.param_key]"
				/>
				<el-date-picker
					type="date"
					:placeholder="'请输入' + item.param_description"
					v-if="item.param_type === 'datetime'"
					v-model="formData[item.param_key]"
				>
				</el-date-picker>
				<el-input
					:placeholder="'请输入' + item.param_description"
					v-if="item.param_type === 'Multi'"
					v-model="formData[item.param_key]"
				/>
				<el-radio-group
					v-if="
						item.param_type === 'Single' &&
							item.param_key !== 'DbConnectionType'
					"
					v-model="formData[item.param_key]"
				>
					<el-radio
						:label="ite.value"
						v-for="(ite, index) in item.options"
						:key="index"
						>{{ ite.label }}</el-radio
					>
				</el-radio-group>
				<el-select
					v-model="formData[item.param_key]"
					:placeholder="'请选择' + item.param_description"
					v-if="
						item.param_type === 'Single' &&
							item.param_key === 'DbConnectionType'
					"
				>
					<el-option
						v-for="(ite, index) in item.options"
						:key="index"
						:label="ite.label"
						:value="ite.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
		</el-col>
	</div>
</template>

<script>
import { tagSMap } from './index'

export default {
	name: 'create-form',
	props: {
		formJsonList: {
			type: Array,
			default: []
		},
		formDataObj: {
			type: Object,
			default: {}
		}
	},
	data () {
		return {
			formConfigList: [],
			formData: {},
			rules: {}
		}
	},
	watch: {
		formDataObj ( val ) {
			this.formData = Object.assign( this.formDataObj, val )
		},
		formJsonList ( val ) {
			this.formConfigList = val
			this.formatData()

		}
	},
	methods: {
		formatData () {
			// 数据处理
			let rule_obj = {}
			this.formConfigList.map( item => {
				let temp_data = [],
					res_data = []
				// this.$nextTick( () => {
				let obj = {}
				obj[ item.param_key ] = item.param_default_value
				// this.formData = obj
				this.$set( this.formData, item.param_key, item.param_default_value )
				// rules 校验
				// } )
				if ( item.param_option ) {
					temp_data = item.param_option.split( ',' )
					temp_data.map( ( ite, index ) => {
						let obj = { label: null, value: null }
						if ( temp_data.length > 2 ) {
							// 多项	处理
							obj.label = ite
							obj.value = ite
							res_data.push( obj )
						} else {
							// 只有两项 true 或 false
							// obj = { label: ite, value: true }
							/* 	console.log( ite );
								console.log( index ); */
							if ( index == 0 ) {
								obj.label = ite
								obj.value = ite
								res_data.push( obj )
							} else {
								// 只有两项 true 或 false
								// obj = { label: ite, value: true }
								if ( index == 0 ) {
									obj.label = ite
									obj.value = true + ''
								} else {
									obj.label = ite
									obj.value = false + ''
								}
								res_data.push( obj )
							}
						}
					} )
				}
				item.options = res_data
				// 校验规则
				let rule_obj_item = {
					name: [
						{
							required: false,
							message: null,
							trigg: 'change',
						}
					]
				}
				let rule_item_obj = {},
					rule_item_arr = [
						{
							required: false,
							message: null,
							trigg: 'change',
						}
					]
				rule_item_obj[ item.param_key ] = null
				for ( const key in rule_item_arr[ 0 ] ) {
					if ( item.param_required === 1 ) {
						// 必填项
						rule_item_arr[ 0 ].required = true
						rule_item_arr[ 0 ].message = '此项为必填项'
					} else {
						rule_item_arr[ 0 ].required = false
						rule_item_arr[ 0 ].message = null
					}
				}
				rule_item_obj[ item.param_key ] = rule_item_arr
				rule_obj[ item.param_key ] = rule_item_arr
			} )
			// 传递数值给父组件
			this.$emit( 'setFormData', ( this.formData ) )
			// todo 校验参数
			this.$emit( 'setFormRules', ( this.rules ) )
		},
		initData () {
			// 初始化数据
			for ( const key in this.formJsonList ) {
				console.log( key )
				this.form_config = this.formJsonList[ key ]
			}
			this.$emit( 'setFormData', ( this.formData ) )
			console.log( this.formJsonList )
			console.log( this.form_config )
		}
	}
};
</script>

<style scoped lang="less">
</style>
